<template>
  <view class="outBox">
    <u-navbar leftText="预约座位" :autoBack="true" bgColor="#cfdbe6"></u-navbar>
    <view class="bgBox" :style="{backgroundImage: `url(${baseImgUrl}newTable/bg1.png)`}"></view>

    <view class="content" :style="{
			marginTop:menuHeight + 'px',
		}">
      <view class="topBox">
        <view class="menus">
          <view class="menu" :class="[curShowType === 1 ? 'active' : '']" @click="curShowType = 1">
            <text>大厅</text>
          </view>
          <view class="menu" :class="[curShowType === 2 ? 'active' : '']" @click="showWait">
            <text>包厢</text>
          </view>
        </view>
        <view class="texts">
          <view class="text">
            <view class="circle"></view>
            <text>可选</text>
          </view>
          <view class="text">
            <view class="circle circle1"></view>
            <text>已选</text>
          </view>
          <view class="text">
            <view class="circle circle2"></view>
            <text>不可选</text>
          </view>
        </view>
      </view>

      <view class="cont-box" v-if="curShowType === 1" :style="{backgroundImage: `url(${baseImgUrl}newTable/bg2.png)`}">
        <view class="headBox">
          <view class="img1">
            <image :src="`${baseImgUrl}newTable/img1.png`" mode="widthFix"/>
          </view>
          <view class="setImg setImg1" @click="handleChoiceBox('S01')">
            <image src="/static/newTable/set2.png" v-show="curTable.counterNo === 'S01'" mode="widthFix"/>
            <image src="/static/newTable/set3.png" v-show="curTable.counterNo !== 'S01' && getCurIsOccupied('S01')"
                   mode="widthFix"/>
            <image src="/static/newTable/set1.png" v-show="curTable.counterNo !== 'S01' && !getCurIsOccupied('S01')"
                   mode="widthFix"/>
            <text>S01</text>
          </view>
          <view class="setImg setImg2" @click="handleChoiceBox('S02')">
            <image src="/static/newTable/set2.png" v-show="curTable.counterNo === 'S02'" mode="widthFix"/>
            <image src="/static/newTable/set3.png" v-show="curTable.counterNo !== 'S02' && getCurIsOccupied('S02')"
                   mode="widthFix"/>
            <image src="/static/newTable/set1.png" v-show="curTable.counterNo !== 'S02' && !getCurIsOccupied('S02')"
                   mode="widthFix"/>
            <text>S02</text>
          </view>
		  <view class="setImg setImg5" @click="handleChoiceBox('S05')">
		    <image src="/static/newTable/set2.png" v-show="curTable.counterNo === 'S05'" mode="widthFix"/>
		    <image src="/static/newTable/set3.png" v-show="curTable.counterNo !== 'S05' && getCurIsOccupied('S05')"
		           mode="widthFix"/>
		    <image src="/static/newTable/set1.png" v-show="curTable.counterNo !== 'S05' && !getCurIsOccupied('S05')"
		           mode="widthFix"/>
		    <text>S05</text>
		  </view>
          <view class="table" :class="['table' + (index+1)]" v-for="(item,index) in center2"
                @click="handleChoiceBox(item)">
            <text>{{ item }}</text>
            <image :src="`${baseImgUrl}newTable/table2.png`" v-show="curTable.counterNo === item" mode="widthFix"/>
            <image :src="`${baseImgUrl}newTable/table3.png`"
                   v-show="curTable.counterNo !== item && getCurIsOccupied(item)"
                   mode="widthFix"/>
            <image :src="`${baseImgUrl}newTable/table1.png`"
                   v-show="curTable.counterNo !== item && !getCurIsOccupied(item)"
                   mode="widthFix"/>
          </view>
        </view>
        <view class="img2">
          <image :src="`${baseImgUrl}newTable/img2.png`" mode="widthFix"/>
        </view>
        <view class="cont">
          <view class="left">
            <view class="setImg" @click="handleChoiceBox('S03')">
              <image src="/static/newTable/set2.png" v-show="curTable.counterNo === 'S03'" mode="widthFix"/>
              <image src="/static/newTable/set3.png" v-show="curTable.counterNo !== 'S03' && getCurIsOccupied('S03')"
                     mode="widthFix"/>
              <image src="/static/newTable/set1.png" v-show="curTable.counterNo !== 'S03' && !getCurIsOccupied('S03')"
                     mode="widthFix"/>
              <text>S03</text>
            </view>
            <view class="shafas">
              <view class="shafa shafa1" v-for="item in leftData" @click="handleChoiceBox(item)">
                <image :src="`${baseImgUrl}newTable/shafa2.png`" v-show="curTable.counterNo === item" mode="widthFix"/>
                <image :src="`${baseImgUrl}newTable/shafa3.png`"
                       v-show="curTable.counterNo !== item && getCurIsOccupied(item)"
                       mode="widthFix"/>
                <image :src="`${baseImgUrl}newTable/shafa1.png`"
                       v-show="curTable.counterNo !== item && !getCurIsOccupied(item)"
                       mode="widthFix"/>
                <text>{{ item }}</text>
              </view>
            </view>
            <view class="setImg" @click="handleChoiceBox('S06')">
              <image src="/static/newTable/set2.png" v-show="curTable.counterNo === 'S06'" mode="widthFix"/>
              <image src="/static/newTable/set3.png" v-show="curTable.counterNo !== 'S06' && getCurIsOccupied('S06')"
                     mode="widthFix"/>
              <image src="/static/newTable/set1.png" v-show="curTable.counterNo !== 'S06' && !getCurIsOccupied('S06')"
                     mode="widthFix"/>
              <text>S06</text>
            </view>
          </view>
          <view class="center">
            <view class="items">
              <view class="item" :class="['item' + index]" v-for="(item,index) in center1">
                <view class="setImg" v-for="one in item" @click="handleChoiceBox(one)">
                  <image src="/static/newTable/set2.png" v-show="curTable.counterNo === one" mode="widthFix"/>
                  <image src="/static/newTable/set3.png" v-show="curTable.counterNo !== one && getCurIsOccupied(one)"
                         mode="widthFix"/>
                  <image src="/static/newTable/set1.png" v-show="curTable.counterNo !== one && !getCurIsOccupied(one)"
                         mode="widthFix"/>
                  <text>{{ one }}</text>
                </view>
              </view>
            </view>
            <view class="bottom">
              <view class="one">
                <view class="setImg" v-for="item in center4" @click="handleChoiceBox(item)">
                  <image src="/static/newTable/set2.png" v-show="curTable.counterNo === item" mode="widthFix"/>
                  <image src="/static/newTable/set3.png" v-show="curTable.counterNo !== item && getCurIsOccupied(item)"
                         mode="widthFix"/>
                  <image src="/static/newTable/set1.png" v-show="curTable.counterNo !== item && !getCurIsOccupied(item)"
                         mode="widthFix"/>
                  <text>{{ item }}</text>
                </view>
              </view>
              <view class="one one1">
                <view class="setImg" v-for="item in center5" @click="handleChoiceBox(item)">
                  <image src="/static/newTable/set2.png" v-show="curTable.counterNo === item" mode="widthFix"/>
                  <image src="/static/newTable/set3.png" v-show="curTable.counterNo !== item && getCurIsOccupied(item)"
                         mode="widthFix"/>
                  <image src="/static/newTable/set1.png" v-show="curTable.counterNo !== item && !getCurIsOccupied(item)"
                         mode="widthFix"/>
                  <text>{{ item }}</text>
                </view>
              </view>
            </view>
          </view>
          <view class="right">
            <view class="setImg" @click="handleChoiceBox('S05')">
              <image src="/static/newTable/set2.png" v-show="curTable.counterNo === 'S05'" mode="widthFix"/>
              <image src="/static/newTable/set3.png" v-show="curTable.counterNo !== 'S05' && getCurIsOccupied('S05')"
                     mode="widthFix"/>
              <image src="/static/newTable/set1.png" v-show="curTable.counterNo !== 'S05' && !getCurIsOccupied('S05')"
                     mode="widthFix"/>
              <text>S05</text>
            </view>
            <view class="shafas">
              <view class="shafa shafa1" v-for="item in rightData" @click="handleChoiceBox(item)">
                <image :src="`${baseImgUrl}newTable/shafa2.png`" v-show="curTable.counterNo === item" mode="widthFix"/>
                <image :src="`${baseImgUrl}newTable/shafa3.png`"
                       v-show="curTable.counterNo !== item && getCurIsOccupied(item)"
                       mode="widthFix"/>
                <image :src="`${baseImgUrl}newTable/shafa1.png`"
                       v-show="curTable.counterNo !== item && !getCurIsOccupied(item)"
                       mode="widthFix"/>
                <text>{{ item }}</text>
              </view>
            </view>
            <view class="setImg" @click="handleChoiceBox('S07')">
              <image src="/static/newTable/set2.png" v-show="curTable.counterNo === 'S07'" mode="widthFix"/>
              <image src="/static/newTable/set3.png" v-show="curTable.counterNo !== 'S07' && getCurIsOccupied('S07')"
                     mode="widthFix"/>
              <image src="/static/newTable/set1.png" v-show="curTable.counterNo !== 'S07' && !getCurIsOccupied('S07')"
                     mode="widthFix"/>
              <text>S07</text>
            </view>
          </view>
        </view>
      </view>
      <view class="cont-box cont-box2" v-else :style="{backgroundImage: `url(${baseImgUrl}newTable/bg2.png)`}">
        <view class="cont-box2-left">
          <view class="cont-box2-one" @click="handleChoiceBox('222')">
            <image v-show="curTable.counterNo === '222'" :src="`${baseImgUrl}newTable/a2.png`" mode="widthFix"/>
            <image v-show="curTable.counterNo !== '222' && getCurIsOccupied('222')"
                   :src="`${baseImgUrl}newTable/a3.png`"
                   mode="widthFix"/>
            <image v-show="curTable.counterNo !== '222' && !getCurIsOccupied('222')"
                   :src="`${baseImgUrl}newTable/a1.png`"
                   mode="widthFix"/>
          </view>
          <view class="cont-box2-one" @click="handleChoiceBox('333')">
            <image v-show="curTable.counterNo === '333'" :src="`${baseImgUrl}newTable/b2.png`" mode="widthFix"/>
            <image v-show="curTable.counterNo !== '333' && getCurIsOccupied('333') "
                   :src="`${baseImgUrl}newTable/b3.png`"
                   mode="widthFix"/>
            <image v-show="curTable.counterNo !== '333' && !getCurIsOccupied('333') "
                   :src="`${baseImgUrl}newTable/b1.png`"
                   mode="widthFix"/>
          </view>
          <view class="cont-box2-one" @click="handleChoiceBox('555')">
            <image v-show="curTable.counterNo === '555'" :src="`${baseImgUrl}newTable/b2.png`" mode="widthFix"/>
            <image v-show="curTable.counterNo !== '555' && getCurIsOccupied('555') "
                   :src="`${baseImgUrl}newTable/b3.png`"
                   mode="widthFix"/>
            <image v-show="curTable.counterNo !== '555' && !getCurIsOccupied('555') "
                   :src="`${baseImgUrl}newTable/b1.png`"
                   mode="widthFix"/>
          </view>
        </view>
        <view class="cont-box2-right">
          <view class="cont-box2-one" @click="handleChoiceBox('666')">
            <image v-if="curTable.counterNo === '666'" :src="`${baseImgUrl}newTable/c2.png`" mode="widthFix"/>
            <image v-if="curTable.counterNo !== '666' && getCurIsOccupied('666') " :src="`${baseImgUrl}newTable/c3.png`"
                   mode="widthFix"/>
            <image v-if="curTable.counterNo !== '666' && !getCurIsOccupied('666') "
                   :src="`${baseImgUrl}newTable/c1.png`"
                   mode="widthFix"/>
          </view>
          <view class="cont-box2-one" @click="handleChoiceBox('888')">
            <image v-if="curTable.counterNo === '888'" :src="`${baseImgUrl}newTable/c2.png`" mode="widthFix"/>
            <image v-if="curTable.counterNo !== '888' && getCurIsOccupied('888') " :src="`${baseImgUrl}newTable/c3.png`"
                   mode="widthFix"/>
            <image v-if="curTable.counterNo !== '888' && !getCurIsOccupied('888') "
                   :src="`${baseImgUrl}newTable/c1.png`"
                   mode="widthFix"/>
          </view>
        </view>
      </view>

      <view class="bottom-box">
        <view class="top-box">
          <view class="item item1">
            <view class="tit">
              <text>选择预订方式</text>
              <image class="iconImg" @click.stop="handleShowInfoBox" :src="`/static/reservation/img2.png`"
                     mode="widthFix">
              </image>
            </view>
            <view class="btns">
              <view class="btn" @click="curPayType = 1"
                    v-if="curTable.counterStatus == 1 || curTable.counterStatus == 2"
                    :class="[curPayType == 1 ? 'active' : '']">
                <text>秒杀价</text>
              </view>
              <view class="btn" @click="curPayType = 2"
                    v-if="curTable.counterStatus == 2" :class="[curPayType == 2 ? 'active' : '']">
                <text>竞价</text>
              </view>
            </view>
          </view>
          <view class="item item2">
            <view class="tit">
              <text>选择卡座</text>
            </view>
            <view class="btn2" v-show="curTable != ''"
                  :style="{'backgroundImage':`url(${baseImgUrl}newTable/bg3.png)`}">
              <view class="info">
                <text>{{ curTable.counterNo }}</text>
                <text>8-10人</text>
              </view>
              <view class="info2">
                <text>{{ curTable.counterStatus == 2 && curPayType != 1 ? '当前最高报价' : '最低消费' }}</text>
                <text>{{
                    curTable.counterStatus == 2 && curPayType != 1 ? curTable.maxBiddingPrice : curTable.fixedPrice
                  }}
                </text>
              </view>
            </view>
          </view>
        </view>
        <view class="btnOut" @click="handleSubmit">
          <view class="btn">
            确认选座
          </view>
        </view>
      </view>
    </view>
    <DiaBox ref="diaBox" @comfireFunc="comfireFunc"
            title="订台说明"
            :content="contentDesc"
            :isClose="false"
            :show-cancel="false" :showBtns="true"/>
  </view>
</template>

<script>
import {
  getDateForYmd,
  getWXStatusHeight
} from '@/utils/index.js'

import DiaBox from "@/components/diaBox/index.vue";

import {
  getDicts,
  getTableListApi,
} from '../../api/api'

export default {
  components: {
    DiaBox
  },
  data() {
    return {
      // 押金
      tableList: [],
      menuHeight: '',
      curTable: '',
      // 已经有人的卡座列表
      havedList: [],
      // 选择支付方式 1一口价 2竞价
      curPayType: 0,
      // 大厅1，包厢2
      curShowType: 1,
      choiceBox: null, // 选择包厢
      baseImgUrl: this.$baseImgUrl,
      leftData: ['V01', 'V03', 'V06', 'V09'],
      rightData: ['V02', 'V05', 'V08', 'V10'],
      center1: [
        ['T01', 'T08', 'T16', 'T22', 'T30', 'T37'],
        ['T06', 'T12', 'T20', 'T28', 'T35'],
        ['T02', 'T09', 'T17', 'T23', 'T31', 'T39'],
        ['T03', 'T10', 'T18', 'T26', 'T32', 'T50'],
        ['T07', 'T15', 'T21', 'T29', 'T36'],
        ['T05', 'T11', 'T19', 'T27', 'T33', 'T51'],
      ],
      center2: ['A01', 'A02', 'A03'],
      center4: ['S08', 'S10', 'S12'],
      center5: ['S09', 'S11'],
      timer: '',
      timer2: '',
      isFirstOpen: {
        flag:'是',
        date: ''
      },
	  // 押金金额
	  deposit:0,
      contentDesc: `订台需支付0元订金，到店成功消费后，原路退还订金。超时/未到店，自动取消订台，订金转入电子账户（有效期30天）`
    }
  },
  async onLoad() {
    let obj = getWXStatusHeight()
    this.menuHeight = obj.menuHeight
    await this.getTableList()

    const isFirstOpen = uni.getStorageSync('isFirstOpen')
    // 判断日期是否是今天
    if (isFirstOpen.flag == '否' && isFirstOpen.date == getDateForYmd()) this.isFirstOpen.flag = '否'
    else {
      await this.getDictData()
      this.handleShowInfoBox()
    }
  },
  onReady() {

  },
  methods: {
	  // 获取字典数据
	  async getDictData() {
      const res = await getDicts("bidding_info_dict")
      if(res.code == 200){
        this.deposit = (parseInt(res.data[0].dictValue) / 100) || 0
      }
      this.contentDesc = `订台需支付${this.deposit}元订金，到店成功消费后，原路退还订金。超时/未到店，自动取消订台，订金转入电子账户（有效期30天）`
    },
    comfireFunc() {
      if (this.isFirstOpen.flag == '是') {
        // 判断时间是否过去5秒
        if (Date.now() - this.timer < 5000) {
          this.$refs.diaBox.show = true
          uni.$u.toast('阅读5秒可关闭')
        } else {
          const date = getDateForYmd()
          console.log(date,"date")
          this.isFirstOpen.flag = '否'
          this.isFirstOpen.date = date
          this.$refs.diaBox.show = false
          uni.setStorageSync('isFirstOpen', this.isFirstOpen)
        }
      } else {
        this.$refs.diaBox.show = false
      }
    },
    handleShowInfoBox() {
      this.$refs.diaBox.show = true
      // 记录当前时间
      this.timer = Date.now()
      this.isFirstOpen.flag = '是'
      const date = getDateForYmd()
      console.log(date,"date")
      this.isFirstOpen.date = date
      uni.setStorageSync('isFirstOpen', this.isFirstOpen)

      // 开启定时器，刷新提示语 每一秒刷新一次 5秒后结束
      this.timer2 = setInterval(() => {
        // 剩余时间
        let time = 5 - Math.floor((Date.now() - this.timer) / 1000)
        this.contentDesc = `订台需支付${this.deposit}元订金，到店成功消费后，原路退还订金。超时/未到店，自动取消订台，订金转入电子账户（有效期30天）` + time + 's后可关闭'

        if(time <= 0){
          clearInterval(this.timer2)
          this.contentDesc = `订台需支付${this.deposit}元订金，到店成功消费后，原路退还订金。超时/未到店，自动取消订台，订金转入电子账户（有效期30天）`
        }
      }, 1000)
    },
    // 获取当前包厢是否被占用
    getCurIsOccupied(num) {
      const one = this.tableList.find(item => item.counterNo == num)
      if (one?.counterStatus) {
        return one.counterStatus == 99
      } else {
        return false
      }
    },
    getOthterImgUrl(item) {
      if (this.curTable.counterNo == item.counterNo) return item.url2
      else if (this.getHaveData(item.counterNo)) return item.url1
      return item.url
    },
    // 获取卡座列表
    async getTableList() {
      const date = new Date()
      const month = date.getMonth().toString().length == 1 ? '0' + (date.getMonth() + 1) : (date.getMonth() +
          1)
      const day = date.getDate().toString().length == 1 ? '0' + date.getDate() : date.getDate()
      const fullTime = date.getFullYear() + '-' + month + '-' + day
      const res = await getTableListApi()
      if (res.data.length > 0) {
        this.tableList = res.data.map(item => {
          if (item.counterNo == 'A01') {
            return {
              ...item,
              url: this.$baseImgUrl + '/reservation/a01.png',
              url1: this.$baseImgUrl + '/reservation/a01_1.png',
              url2: this.$baseImgUrl + '/reservation/a01_2.png',
              showName: false,
            }
          } else if (item.counterNo == 'A02') {
            return {
              ...item,
              url: this.$baseImgUrl + '/reservation/a02.png',
              url1: this.$baseImgUrl + '/reservation/a02_1.png',
              url2: this.$baseImgUrl + '/reservation/a02_2.png',
              showName: false,
            }
          } else if (item.counterNo == 'A03') {
            return {
              ...item,
              url: this.$baseImgUrl + '/reservation/a03.png',
              url1: this.$baseImgUrl + '/reservation/a03_1.png',
              url2: this.$baseImgUrl + '/reservation/a03_2.png',
              showName: false,
            }
          } else {
            return {
              ...item,
              showName: true
            }
          }
        })

        // 已选卡座
        this.havedList = this.tableList.filter(item => item.counterStatus == 99).map(item => item
            .counterNo)
      }
      console.log(res, "res");
    },
    // 选择包厢
    handleChoiceBox(num) {
      console.log(num, "num")
      this.curPayType = 0
      this.curTable = this.tableList.find(item => item.counterNo == num)
      if (!this.curTable) {
        this.$toast('未配置该卡桌信息')
      }
      if (this.curTable.counterStatus == 99) {
        this.curTable = ''
        return this.$toast('当前卡座已选')
      }

    },
    // 确认选择座位
    handleSubmit() {
      if (this.curPayType == 0) {
        return this.$toast("请选择支付方式")
      }
      if (!this.curTable?.counterNo) return this.$toast("请选择卡座")
      uni.setStorageSync('curTable', this.curTable)
      // 一口价
      if (this.curPayType == 1) {
        this.getnav("index?tableName=" + this.curTable.counterNo + '&counterDetailId=' + this.curTable.id +
            '&fixedPrice=' + this.curTable.fixedPrice + '&price=' + this.curTable.bookingDepositPrice)
      } else {
        this.getnav("competition?tableName=" + this.curTable.counterNo + '&counterDetailId=' + this.curTable
            .id + '&maxBiddingPrice=' + this.curTable.maxBiddingPrice + '&price=' + this.curTable.biddingDepositPrice + '&isJoinBidding=' + this.curTable.isJoinBidding + '&isExistBidding=' + this.curTable.isExistBidding)
      }
    },
    getHaveData(counterNo) {
      return this.havedList.findIndex(one => one == counterNo) != -1
    },
    // 点击table
    handleTable(item) {
      if (this.getHaveData(item.counterNo)) return this.$toast('当前卡座不可选')
      this.curTable = item
    },
    showWait() {
      uni.$u.toast('敬请期待')
    }
  }
}
</script>

<style lang="scss" scoped>
.iconImg {
  width: 27rpx;
  height: 27rpx;
}

image {
  width: auto;
  height: auto;
}

.cont-box2-one {
  position: relative;
  height: 300rpx;

  image {

  }
}

.cont-box2 {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 50rpx 27rpx !important;

  .cont-box2-left {
    width: 200rpx;

    image {
      width: 200rpx;
    }
  }

  .cont-box2-right {
    margin-left: 80rpx;
    width: 250rpx;

    image {
      width: 250rpx;
    }
  }
}

::v-deep .u-navbar {
  z-index: 9999;
}

page {
  background: #d6e0e9;
}

.btnOut {
  border-radius: 64rpx;
  margin-top: 30rpx;
  box-shadow: 0rpx 0rpx 40rpx 38rpx rgba(15, 198, 194, 0.25);

  .btn {
    font-size: 32rpx;
    text-align: center;
    color: #fff;
    width: 100%;
    height: 110rpx;
    line-height: 110rpx;
    background: #0FC6C2;
    border-radius: 64rpx;
    box-shadow: inset 0rpx 14rpx 34rpx 0rpx #FFFFFF;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    .iconImg {
      width: 32rpx;
      margin-left: 8rpx;
    }

    .myText {
      text {
        font-weight: 600;
        font-size: 36rpx;
        color: #FFFFFF;
        line-height: 36rpx;
        text-align: left;
        font-style: normal;
      }
    }
  }

}


.bgBox {
  height: 100vh;
  width: 100vw;
  background-size: 100% 100%;
  position: fixed;
  top: 0;
}

.bottom-box {
  width: 682rpx;
  background: #E6F2FF;
  border-radius: 60rpx;
  backdrop-filter: blur(7px);
  margin-top: 20rpx;
  padding: 30rpx;

  .top-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    min-height: 100rpx;

    .item {
      .tit {
        text-align: center;
        display: flex;
        align-items: center;

        text {
          font-size: 25rpx;
          font-weight: bolder;
          margin-right: 5rpx;
        }
      }

      .btns {
        display: flex;
        justify-content: space-between;

        .btn {
          width: 134rpx;
          height: 64rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #fff;
          border-radius: 15rpx;

          text {
            font-weight: 400;
            font-size: 28rpx;
            color: #86909C;
          }
        }

        .active {
          background: #bacfde;
        }
      }
    }

    .item1 {
      border-right: 1px solid #D2D4D8;
      padding-right: 26rpx;

      .tit {
        margin-bottom: 35rpx;
      }
    }

    .item2 {
      padding-left: 26rpx;

      .btn2 {
        background-size: 100% 100%;
        padding: 18rpx 24rpx;
        margin-top: 18rpx;

        .info {
          display: flex;
          align-items: flex-end;
          justify-content: space-between;

          text {
            &:nth-child(1) {
              font-weight: 500;
              font-size: 36rpx;
              color: #FFFFFF;
            }

            &:nth-child(2) {
              font-size: 24rpx;
              color: #FFFFFF;
            }
          }
        }

        .info2 {
          font-size: 24rpx;
          color: #FFFFFF;
          margin-top: 6rpx;
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
}

.center {
  padding-top: 70rpx;

  .bottom {
    .one {
      display: flex;
      width: 300rpx;
      justify-content: space-between;
      margin: 0 auto;
    }

    .one1 {
      width: 200rpx;
    }
  }

  .items {
    display: flex;

    .item {
      .setImg {
        margin-bottom: 15rpx;
      }
    }

    .item1, .item4 {
      margin-top: 35rpx;
    }

    .item2 {
      margin-right: 20rpx;
    }

    .item3 {
      margin-left: 20rpx;
    }
  }
}

.setImg {
  position: relative;
  width: 60rpx;
  height: 60rpx;

  text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #0d0d0d;
    font-size: 16rpx;
  }

  image {
    width: 60rpx;
  }
}

.shafa {
  position: relative;
  height: 102rpx;

  image {
    width: 72rpx;
    height: 102rpx;
  }

  text {
    position: absolute;
    top: 48%;
    right: 7rpx;
    transform: translateY(-50%);
    color: #0d0d0d;
    font-size: 14rpx;
  }
}

.cont-box {
  padding: 0 50rpx;
  background-size: 100% 100%;
  width: 680rpx;
  height: 954rpx;
  margin: 100rpx auto 20rpx;
  box-sizing: border-box;
  overflow: hidden;

  .cont {
    display: flex;
    justify-content: space-between;
    margin-top: -50rpx;
  }

  .left, .right {
    width: fit-content;

    .shafas {
      margin: 20rpx 0;
    }
  }

  .right {
    .shafa {
      image {
        transform: rotate(180deg);
      }

      text {
        right: auto;
        left: 7rpx;
      }
    }
  }

}

.img2 {
  text-align: center;
  margin-top: -15rpx;

  image {
    width: 200rpx;
  }
}

.headBox {
  position: relative;
  width: 380rpx;
  margin: 40rpx auto 0;

  .setImg {
    position: absolute;
    bottom: 10rpx;
  }

  .setImg1 {
    left: 0;
  }

  .setImg2 {
    right: 0;
  }
  .setImg3 {
	  left: 50rpx;
  }


  .img1 {
    image {
      //width: 385rpx;
      width: 380rpx;
    }
  }

  .table {
    position: absolute;

    text {
      position: absolute;
      bottom: 44rpx;
      left: 50%;
      transform: translateX(-50%);
      color: #55688d;
      font-size: 18rpx;
    }

    image {
      width: 138rpx;
    }
  }

  .table1 {
    top: 46rpx;
    left: 20rpx;
    transform: rotate(-51deg);
  }

  .table2 {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .table3 {
    top: 46rpx;
    right: 20rpx;
    transform: rotate(51deg);
  }
}

.topBox {
  display: flex;
  justify-content: space-between;

  .texts {
    display: flex;

    .text {
      display: flex;
      align-items: center;
      margin-left: 32rpx;

      .circle {
        width: 16rpx;
        height: 16rpx;
        background: #D8D8D8;
        margin-right: 8rpx;
        border-radius: 50%;
      }

      .circle1 {
        background: #0FC6C2;
      }

      .circle2 {
        background: #ff80ff;
      }
    }

    text {
      font-weight: 400;
      font-size: 28rpx;
      color: #86909C;
      line-height: 28rpx;
      text-align: left;
      font-style: normal;
    }
  }

  .menus {
    display: flex;
    align-items: flex-start;

    .menu {
      &:nth-child(1) {
        margin-right: 50rpx;
      }
    }

    text {
      font-weight: 400;
      font-size: 28rpx;
      color: #86909C;
      line-height: 28rpx;
      text-align: left;
      font-style: normal;
    }

    .active {
      position: relative;

      &:after {
        content: '';
        width: 56rpx;
        height: 6rpx;
        background: #0FC6C2;
        border-radius: 4rpx;
        position: absolute;
        bottom: -20rpx;
        left: 50%;
        transform: translateX(-50%);
      }

      text {
        color: #212429;
      }
    }
  }
}

//.bgBox {
//  height: 100vh;
//  min-height: 775px;
//  width: 100vw;
//  background-size: 100% 100%;
//  position: fixed;
//  top: 0;
//}

.content {
  position: relative;
  box-sizing: border-box;
  padding: 40rpx 30rpx;
}

.left-slot {
  color: #1c2128;
  display: flex;
  align-items: center;

  image {
    width: 40rpx;
    margin-right: 30rpx;
  }
}

.outBox {
}
</style>
